<head>
	<meta charset="utf-8">

	<link href="../css/styles.css" rel="stylesheet">
	<link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
	<link rel="stylesheet" href="../css/font-awesome.min.css" type="text/css">
	<link rel="stylesheet" href="../css/themify-icons.css" type="text/css">
	<link rel="stylesheet" href="../css/elegant-icons.css" type="text/css">
	<link rel="stylesheet" href="../css/owl.carousel.min.css" type="text/css">
	<link rel="stylesheet" href="../css/nice-select.css" type="text/css">
	<link rel="stylesheet" href="../css/jquery-ui.min.css" type="text/css">
	<link rel="stylesheet" href="../css/slicknav.min.css" type="text/css">
	<link rel="stylesheet" href="../css/style.css" type="text/css">
	<link rel="stylesheet" href="../css/susu.css" type="text/css">
	<!-- Js Plugins -->
	<script src="../js/jquery-3.3.1.min.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script src="../js/jquery-ui.min.js"></script>
	<script src="../js/jquery.countdown.min.js"></script>
	<script src="../js/jquery.nice-select.min.js"></script>
	<script src="../js/jquery.zoom.min.js"></script>
	<script src="../js/jquery.dd.min.js"></script>
	<script src="../js/jquery.slicknav.js"></script>
	<script src="../js/owl.carousel.min.js"></script>
	<script src="../js/paginator.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body >

<!--头部引入-->
<div class="su_head ">
</div>

<br />
		
		<div id="main-wrapper">

		<section class="gray pt-5 pb-5">
			<div class="container-fluid">
				<div class="row">
					<div class="col-lg-3 col-md-4 col-sm-12">
						<div class="property_dashboard_navbar">
							<div class="dash_user_avater">
								<img src="#" class="img-fluid avater" alt="" id="avater">
								<h4 id="avatername">姓名</h4>
							</div>
							<div class="dash_user_menues">
								<ul>
						
									<li ><a href="mypersonal.html"><i class="fa fa-user-tie"></i>个人信息</a></li>
									<li><a href="mycart.html"><i class="fa fa-bookmark"></i>我的收藏<span class="notti_coun style-2">7</span></a></li>
									<li class="active"><a href="myorder.html"><i class="fa fa-tasks"></i>我的交易</a></li>
									<li><a href="myinfo.html"><i class="fa fa-tasks"></i>我的发布</a></li>
					
									<li><a href="mypublish.html"><i class="fa fa-pen-nib"></i>发布信息</a></li>
									<li><a href="mypassword.html"><i class="fa fa-unlock-alt"></i>修改密码</a></li>
								</ul>
							</div>
							<div class="dash_user_footer">
								<ul>
									<li><a href="#"><i class="fa fa-power-off"></i></a></li>
									<li><a href="#"><i class="fa fa-comment"></i></a></li>
									<li><a href="#"><i class="fa fa-cog"></i></a></li>
								</ul>
							</div>
						</div>
					</div>
						
						
						<div class="col-lg-9 col-md-8 col-sm-12">
							<div class="dashboard-body">
					
								<div class="row">
									<div class="col-lg-12 col-md-12">
										<div class="dashboard_property">
											<div class="table-responsive">
												<table class="table">
													<thead class="thead-dark">
														<tr>
															<th scope="col">信息</th>
															<th scope="col" class="m2_hide">发布人</th>
															<th scope="col" class="m2_hide">价格</th>
															<th scope="col" class="m2_hide">时间</th>
															<th scope="col">状态</th>
															<th scope="col">操作</th>
														</tr>
													</thead>
													<tbody class="myorder">

<!--
														<tr>
															<td>
																<div class="dash_prt_wrap">
																	<div class="dash_prt_thumb"><img
																			src="#" class="img-fluid"
																			alt=""></div>
																	<div class="dash_prt_caption">
																		<h5>4 Bhk Luxury Villa</h5>
																		<div class="prt_dashb_lot">5682 Brown River Suit
																			18</div>
																		<div class="prt_dash_rate"><span>$
																				2,200,000</span></div>
																	</div>
																</div>
															</td>
															<td class="m2_hide">
																<div class="prt_leads"><span>27 till now</span></div>
																<div class="prt_leads_list">
																	<ul>
																		<li><a href="#"><img src="#"
																					class="img-fluid img-circle"
																					alt=""></a></li>
																		<li><a href="#"><img src="#"
																					class="img-fluid img-circle"
																					alt=""></a></li>
																		<li><a href="#"
																				class="_leads_name style-1">K</a></li>
																		<li><a href="#"><img src="#"
																					class="img-fluid img-circle"
																					alt=""></a></li>
																		<li><a href="#" class="leades_more">10+</a></li>
																	</ul>
																</div>
															</td>
															<td class="m2_hide">
																<div class="_leads_view">
																	<h5 class="up">816</h5>
																</div>
																<div class="_leads_view_title"><span>Total Views</span>
																</div>
															</td>
															<td class="m2_hide">
																<div class="_leads_posted">
																	<h5>16 Aug - 12:40</h5>
																</div>
																<div class="_leads_view_title"><span>16 Days ago</span>
																</div>
															</td>
															<td>
																<div class="_leads_status"><span
																		class="expire">Expired</span></div>
																<div class="_leads_view_title"><span>Till 12 Oct</span>
																</div>
															</td>
															<td>
																<div class="_leads_action"><a href="#"><i
																			class="fas fa-edit"></i></a><a href="#"><i
																			class="fas fa-trash"></i></a></div>
															</td>
														</tr>
			-->

													</tbody>
												</table>
											</div>
										</div>
									</div>
								</div>
								<div class="container text-center">
									<ul class="pagination hidden" id="pagination">
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
		
		</div>
	</body>
<script type="text/javascript">


	//调用公共头部
	$('.su_head').load('head.html');
	//获取导航栏信息
	$(document).ready(function () {
		$.ajax({
			type: 'get',
			url: '/ayuancity/categorys/getcategoryAndtype',
			success: function (res) {
				// console.log( $('.su_nav').text())
				for (let i = 0; i < res.content.data.length; i++) {

					let nav = res.content.data[i];
					var category =
							`
							<li id="${nav.categoryName}">
							<a href="itemsPage.html?categoryName=${nav.categoryName}">${nav.categoryName}</a>
							`;
					var drop = '';
					var type = '';
					if (nav.types.length > 0) {
						drop = ` <ul class="dropdown "  >`
						for (let j = 0; j < nav.types.length; j++) {
							type = type + `<li ><a href="itemsPage.html?categoryName=${nav.categoryName}&typeName=${nav.types[j].typeName}">${nav.types[j].typeName}</a></li>`

						}
						type = type + `</ul>`
					}
					var template = category + drop + type + ` </li>`;
					$('.su_nav').append(template);

				}
				// console.log($('.su_head').text());
			}

		})
		// 判断是否登录 已登录 显示昵称
		let citytoken = sessionStorage.getItem('citytoken');
		if (citytoken) {
			$.ajax({
				type: 'GET',
				url: '/city/user/info',
				data: {
					token: citytoken
				},
				success: function (json) {
					if (json.success) {
						let username = json.content.user.userName;
						userId=json.content.user.userId;
						sessionStorage.setItem('userId',userId);
						// console.log(json)
						$('#yuan-login').html(username);
						// $('#user-showname').html(showname);
						$('#yuan-login').attr('data-toggle', 'dropdown');
						$('#yuan-userImg').removeClass("hidden");
						$('#yuan-userImg').removeClass("hidden");
						$('#yuan-userImg').attr("src",json.content.user.userImg);
						$('#avater').attr("src",json.content.user.userImg)
						$('#avatername').html(json.content.user.userName);
					}
				}
			});
		}
	//交易记录
		let userId = sessionStorage.getItem('userId');
		console.log(userId)
       $.ajax({
		   type: 'get',
		   url: `/ayuancity/orders/list/${userId}`,
		   success: function (res){
			   console.log(res)
			   for (let i = 0; i < res.content.data.list.length; i++) {
                   let item=res.content.data.list[i]
				   let template=`
						   <tr>
							   <td>
								   <div class="dash_prt_wrap">
									   <div class="dash_prt_thumb">
										   <img src="${item.infoImg}" class="img-fluid" alt="">
									   </div>

									   <div class="dash_prt_caption">
										   <h5>${item.infoTitle}</h5>
										   <div class="prt_dash_rate"><span>${item.infoContent}</span></div>
									   </div>
								   </div>
							   </td>
							   <td class="m2_hide">

								   <div class="prt_leads_list " style="margin-top: 15px">
										${item.userName}
								   </div>
							   </td>
							   <td class="m2_hide ">
	  								 <div class="prt_leads_list " style="margin-top: 15px">
										 	${item.totalPrice}
								   </div>
							   </td>
							   <td class="m2_hide " >
								 	 <div class="prt_leads_list " style="margin-top: 15px">
										 		${item.createTime}
								   </div>
							   </td>
							   <td>
								   <div class="_leads_status" style="margin-top: 15px"><span
										   class="active">${item.state}</span></div>

							   </td>
							   <td>
								   <div class="_leads_action" style="margin-top: 15px">
								    <button class="btn btn-success" onclick="buyInfos(${item.id})">支付</button>
									 <button class="btn btn-info">删除</button>
								   </div>
							   </td>
						   </tr>`
				   $('.myorder').append(template)
			   }
			   // 显示分页按钮
			   $('#pagination').removeClass('hidden');

			   // 调用分页按钮
			   callPaginator(1, res.content.data.pages, orderlist);
		   }
	   })
	});



	function loginout() {
		$.ajax({
			type: 'POST',
			url: '/city/user/OutLogin',
			success: function (json) {
				if (json.success) {
					sessionStorage.removeItem('citytoken');
					alert("欢迎下次登录")
					location.href = 'index.html';
				}
			}
		});
	}

	function orderlist(page, size) {
		let userId = sessionStorage.getItem('userId');
		$.ajax({
			type: 'get',
			url: `/ayuancity/orders/list/${userId}`,
			data: {
				pageNum:page,
				pageSize:size
			},
			success: function (res){
				console.log(res)
				$('.myorder').children('tr').remove();
				for (let i = 0; i < res.content.data.list.length; i++) {
					let item=res.content.data.list[i]
					let template=`
						   <tr>
							   <td>
								   <div class="dash_prt_wrap">
									   <div class="dash_prt_thumb">
										   <img src="${item.infoImg}" class="img-fluid" alt="">
									   </div>

									   <div class="dash_prt_caption">
										   <h5>${item.infoTitle}</h5>
										   <div class="prt_dash_rate"><span>${item.infoContent}</span></div>
									   </div>
								   </div>
							   </td>
							   <td class="m2_hide">

								   <div class="prt_leads_list " style="margin-top: 15px">
										${item.userName}
								   </div>
							   </td>
							   <td class="m2_hide ">
	  								 <div class="prt_leads_list " style="margin-top: 15px">
										 	${item.totalPrice}
								   </div>
							   </td>
							   <td class="m2_hide " >
								 	 <div class="prt_leads_list " style="margin-top: 15px">
										 		${item.createTime}
								   </div>
							   </td>
							   <td>
								   <div class="_leads_status" style="margin-top: 15px"><span
										   class="active">${item.state}</span></div>

							   </td>
							   <td>
								   <div class="_leads_action" style="margin-top: 15px">
								    <button class="btn btn-success" onclick="buyInfos(${item.id})">支付</button>
									 <button class="btn btn-info">删除</button>
								   </div>
							   </td>
						   </tr>`
					$('.myorder').append(template)
				}
				// 显示分页按钮
				$('#pagination').removeClass('hidden');

				// 调用分页按钮
				callPaginator(1, res.content.data.pages, orderlist);
			}
		})




	}

	// 分页
	function callPaginator(currentPage, pages, callback) {
		$('#pagination').bootstrapPaginator({
			bootstrapMajorVersion: 3,
			size: "normal",
			alignment: "center",
			currentPage: currentPage,
			totalPages: pages,
			numberOfPages: 5,

			// 点击页码回调函数
			onPageClicked: function (event, originalE, type, page) {
				let userId = sessionStorage.getItem('userId');
				callback(page, 5,userId);
				$(window).scrollTop(0);
			},

			itemTexts: function (type, page, current) {
				switch (type) {
					case 'first':
						return "首页";
					case 'prev':
						return "<";
					case 'next':
						return ">";
					case 'last':
						return "末页";
					case 'page':
						return page;
				}
			}
		});
	}

	function buyInfos(ordersId){
		//是否登录
		let userId = sessionStorage.getItem('userId');
		if (userId) {
			location.href="/city/v1/pay/alipay2?ordersId="+ordersId;
		}else{
			alert("请先登录")
		}
	}

</script>
</html>
